<template>
	
	<view class="detail">
		
	    <uni-nav-bar fixed="true" left-icon="back" @clickLeft="back()" @clickRight="toCart()" status-bar="true" background-color="#e60012" color="#fff" >
		
			<view class="tabbar">
				<view class="goods">商品</view>
				<view class="content">详情</view>
				<view class="comment">评论</view>
			</view>	
			   
		   <view slot="right">
			   <view class="iconfont uni-icon icon-gouwuche"></view>
		   </view>
			
		</uni-nav-bar>
		   
		<!-- 轮播图 -->
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in goods.imgArray" :key="index" @tap="showBigImg(item, index)">
					<view class="swiper-item">
						<image :src="item.image_url" lazy-load="true" mode="widthFix"></image>
					</view>
				</swiper-item>
				
			</swiper>
		</view>
		
		<!-- 商品信息 -->
		<view class="goods-info">
			<view class="goods-title">
				<view class="title">{{goods.goods_name}}</view>
				
				<button type="default" class="share" open-type="share" hover-class="none">
					<view class="iconfont icon-fenxiang1"></view>
				</button>
			</view>
			<view class="price-number">
				<view class="price">￥{{goods.shop_price}}</view>
				<view class="sale-number">月销量：{{goods.sale_number}}</view>
			</view>
		</view>
		
		<view class="content-box">
			<rich-text :nodes="htmlString"></rich-text>
		</view>
		
		<view class="footer">
			<view class="left">
				<view class="like" @tap="favorite()">
					<view class="icon">
						<view class="iconfont " :class="goods.favorite == 1?'icon-yiguanzhu text-danger':'icon-weiguanzhu'"></view>
						<view class="name">收藏</view>
					</view>
				</view>
				<view class="like" @tap="toShop()">
					<view class="icon">
						<view class="iconfont icon-dianpu"></view>
						<view class="name">店铺</view>
					</view>
				</view>
			</view>
			<view class="cart" @tap="showSpec('cart')">加入购物车</view>
			<view class="buy" @tap="showSpec('buy')">立即购买</view>
		</view>
		
		<uni-popup :show="showPopup" type="bottom" v-on:hidePopup="hidePopup">
			<view class="popup">
				<view class="top">
					<view class="img">
						<image :src="goods.original_image"></image>
					</view>
					<view class="info">
						<view class="price">￥{{goods_price}}</view>
						<view class="store">库存：<text>{{goods_store}}</text></view>
						<view class="spec-name">{{spec_name}}</view>
					</view>
				</view>
				<view class="buy-number">
					<view class="name">购买数量</view>
					<view class="number">
						<uni-number-box :min="minNum" :value="number" :max="maxNum" @change="numberChange"></uni-number-box>
					</view>
				</view>

				<view class="spec-box">
					<view class="spec-row" v-for="(item, rowIndex) in goods.spec" :key="rowIndex">
						<view class="spec-title">{{item.name}}</view>
						<view class="spec-items">
							<view class="spec-item" :class="spec.select?'active':''" @tap="spec_click(index, item)" v-for="(spec, index) in item.items" :key="index">{{spec.value}}</view>
						</view>
					</view>
				</view>
				<view class="confirm-btn" @tap="check()">确定</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	import uniNavBar from '../../components/uni-nav-bar.vue';
	import uniPopup from '../../components/uni-popup.vue';
	import uniNumberBox from '../../components/uni-number-box.vue'
	
	export default {
		components: {
			uniNavBar, uniPopup, uniNumberBox
		},
		data() {
			return {
				goods: {},
				goodsId: '',
				showPopup: false,
				minNum: 1,
				maxNum: 1,
				operateType: '',
				number:1,
				spec_name: '请选择规格',
				goods_price: 0,
				goods_store: 0,
				price_id: '',
				opear_type: '',
				active_type: '',
				order_group_id:'',
				htmlString: '',
				userinfo: {}
			};
		},
		onLoad(options) {
			// console.log(options);return;
			console.log('detail data');
			console.log(options);
			if(options.rUserId) {
				uni.setStorageSync('recommendId', options.rUserId)
			}
			this.goodsId = options.id;
			// this.goodsId = '5847';
			this.userinfo = uni.getStorageSync('userinfo');
			this.getGoodsDetail();
		},
		onShareAppMessage() {
			Request.send({
				url: 'share/addRecord',
				data: {
					type: 3
				},
				checkCode: false
			})
			return {
				title: this.goods.goods_name,
				path: '/pages/goods/detail?id='+this.goodsId+'&rUserId='+this.userinfo.id,
			}
		},
		methods: {
			//获取商品详情
			getGoodsDetail: function(){
				var that = this;
				var params = {
					url: "goods/detail",
					data: {id: that.goodsId},
					sCallback: function(res) {
						// console.log(res.data);return;
						that.goods = res.data;
						that.maxNum = parseInt(res.data.store_count);
						that.goods_store = res.data.store_count;

						if(res.data.active_type == 'spike') {
							that.goods_price = res.data.spike_info.price;
						} else if (res.data.active_type == 'group') {
							that.goods_price = res.data.group_info.price;
							
						} else {
							that.goods_price = res.data.shop_price;
						}

        				that.active_type = res.data.active_type;
						that.htmlString = res.data.content.replace(/\\/g, "").replace(/<img/g, "<img style=\"max-width:100%;\"");

					}
				}
				Request.send(params);
			},
			//隐藏弹窗
			hidePopup: function(){
				this.showPopup = false;
			},
			//收藏
			favorite: function(){
				var that = this;
				var data = {
					id: this.goodsId,
					type: 1
				}

				if(this.goods.favorite == 1) {
					var url = 'favorite/cancel';
				} else {
					var url = 'favorite/add';
				}

				var params = {
					url: url,
					data: data,
					
					sCallback: function(res) {
						if(that.goods.favorite == 1) {
							that.goods.favorite = 0;
						} else {
							that.goods.favorite = 1;
						}
						
						uni.showToast({
							title: res.msg
						})
					}
				}

				Request.send(params);
			},
			//点击规格
            spec_click: function(specIndex, itemList){

            	var that = this;
        		itemList.items.forEach(function(item, index){
        			if(index == specIndex) {
        				if(item.select) {
        					item.select = !item.select;
        				} else {
	            			that.$set(item, 'select', true);
        				}		
        			} else {
            			that.$set(item, 'select', false);
            		}
        		});
        		this.check_spec_price();
            },
            //检测规格价格
            check_spec_price: function(){
            	var that = this;
            	var spec = that.goods.spec;
            	var spec_len = spec.length;
            	var checkNum = 0;
            	var spec_list = [];
            	spec.forEach(function(specList){
            		specList.items.forEach(function(item, index){
            			if(item.select) {
            				checkNum ++;
            				spec_list.push(item.id);
            			}
            		})
            	})
            	// console.log(spec_list);
            	spec_list.sort(function (x,y) {
			        return x-y;
			    })
            	var spec_key = spec_list.join('_');
            	var spec_price = that.goods.specPrice;
            	// console.log(checkNum);
            	if(that.active_type == 'spike') {
					that.goods_price = that.goods.spike_info.price;
    				that.goods_store = that.goods.spike_info.store_count < that.goods.spike_info.limit_number ? that.goods.spike_info.store_count : that.goods.spike_info.limit_number;
				} else if (that.active_type == 'group') {
					that.goods_price = that.goods.group_info.price;
    				that.goods_store = that.goods.store_count;
				} else {
					that.goods_price = that.goods.shop_price;
    				that.goods_store = that.goods.store_count;
				}


				that.spec_name = '请选择规格';
				that.price_id = '';

            	if(checkNum == spec_len) {
            		// console.log('price')
            		console.log(spec_key);
            		spec_price.forEach(function(item, index){
            			if(item.key == spec_key) {
            				console.log(item);
            				if(that.active_type != 'group' && that.active_type != 'spike') {
                				that.goods_price = item.price;
            				}
            				that.goods_store = item.store_count;
            				that.spec_name = item.spec_name;
            				that.price_id = item.id;
            			}
            		})
            	}
            },
            //更改购买数量
            numberChange: function(e) {
				
            	this.number = e.val;
            },
            //显示规格弹窗
            showSpec: function(opear_type) {
            	this.opear_type = opear_type;
            	this.showPopup = true;
            },
            //检查 
            check: function(){
            	if(this.goods.spec.length > 0 && !this.price_id) {
					Request.alert('请选择规格'); return false;
				}

				if(this.opear_type == 'buy') {
					this.buy();
				} else {
					this.addCart();
				}
            },
            //立即购买
            buy: function(){
				var url = '/pages/order/confirm?goods_id='+this.goodsId+'&price_id='+this.price_id+'&number='+this.number+'&cart_ids=&type=goods&active_type='+this.active_type+'&address_id=&order_group_id='+this.order_group_id;
				console.log(url);
				uni.navigateTo({
					url: url
				})
            },
            //加入购物车
            addCart: function(){
            	//拼团商品，秒杀商品，押金商品，分期商品不能加入购物车
				if(this.active_type == 'group' || this.active_type == 'spike' || this.goods.goods_type != 1) {
					Request.alert('该商品不支付加入购物车'); return false;
				}

				var id = this.goodsId;
				var url =  'cart/addCart';
				var that = this;

				var params = {
					url: 'cart/addCart',
					data: {
						'goods_id':id,
						'number': this.number,
						'price_id': this.price_id,
					},
					sCallback: function(res){
						uni.showToast({
							title: '添加成功'
						})
						that.showPopup = false;
					}
				}

				Request.send(params);
            },
			//后退
			back: function() {
				uni.navigateBack({
					
				})
			},
			//云购物车
			toCart: function(){
				uni.navigateTo({
					url: '/pages/cart/index'
				})
			},
			//去店铺首页
			toShop: function() {
				if(this.goods.business_id) {
					uni.navigateTo({
						url: '/pages/seller/index?id='+this.goods.business_id+'&name='+this.goods.business_name
					})
				}
			}
		}
	}
</script>

<style>
	/* 顶部搜索开始 */
		.uni-navbar .tabbar{	
			align-items: center;
			display: flex;
			width: 100%;
			height: 44px;
		}
		
		.uni-navbar .tabbar view{
			height: 30px;
			line-height: 30px;
		}
		
		.uni-navbar .tabbar>view{
			/* background: rgba(255, 255, 255, 0.3); */
			/* color: #fff; */
			font-size: 24upx;
			flex: 1;
			border-radius: 8upx;
			flex: 1;
			text-align: center;
		}
		
		.uni-navbar .uni-icon{
			font-size: 40upx;
			height: 60upx;
			width: 60upx;
			line-height: 60upx;
			text-align: center;
		}

	/* 顶部搜索结束 */
	
	/* 轮播图开始*/
		.banner swiper{
			width: 100%;
			height: 750upx;
		}
		.banner .swiper-item image{
			width: 750upx;
			height: 750upx;
		}
	/* 轮播图结束 */

	/* 商品样式开始 */
		.goods-info{
			background: #fff;
			padding: 10upx 20upx;
		}

		.goods-info .goods-title{
			display: flex;
		}

		.goods-info .goods-title .title{
			flex:1;
			font-size: 28upx;
		}

		.goods-info .goods-title .share{
			display: flex;
			color: #007aff;
			width: 70upx;
			background: none;
			padding: 0;
			margin: 0;
			justify-content: center;
			border: none;
		}
		
		.goods-info .goods-title .share:after{
			content: '';
			border: none;
		}

		.goods-info .goods-title .share .iconfont{
			font-size: 50upx;
		}

		.goods-info .price-number{
			display: flex;
			color: #e60012;
			font-size: 28upx;
		}

		.goods-info .price-number .price{
			margin-right: 20upx;
		}
	/* 商品样式结束 */

	.content-box{
		margin-top: 20upx;
	}

	/* 底部样式开始 */
		.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			height: 88upx;
			display: flex;
			flex-direction: row;
			width: 100%;
			font-size: 28upx;
			text-align: center;
			background: #fff;
		}

		.footer .left{
			display: flex;
			flex:1;

		}

		.footer .left>view{
			flex: 1;
			color: #949595;
			font-size: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-left: 1upx solid #eee;
			border-top: 1upx solid #eee;
		}
		
		.footer .left>view:nth-child(1){
			border-left: none;
		}
		
		.footer .left .icon>view{
			line-height: 44upx;
		}

		.footer .left .iconfont{
			font-size: 40upx;
		}

		.footer .cart{
			background: #FD9402;
			color: #fff;
			flex: 1;
			line-height: 88upx;
		}

		.footer .buy{
			background: #FD0136;
			color: #fff;
			line-height: 88upx;
			flex: 1;
		}
	/* 底部样式结束 */

	/* 弹窗样式开始 */
		.uni-popup{
			max-height: 800upx;
			height: 400upx;
		}
		.popup{
			max-height: 800upx;
			min-height: 400upx;
			/*overflow-y: scroll;*/
			background: #fff;
			padding-bottom: 80upx;
		}

		.popup .top{
			display: flex;
			width: 100%;
			position: relative;
			padding-left: 250upx;
			height: 150upx
		}

		.popup .top .img{
			position: absolute;
			top: -50upx;
			z-index: 9999;
			left: 25upx;
		}

		.popup image{
			width: 200upx;
			height: 200upx
		}

		.popup .top .info{
			display: flex;
			flex-direction: column;
			text-align: left;
		}

		.popup .top .price{
			color: #e60012;
			margin-bottom: 10upx;
		}
		.popup .top .store{
			font-size: 24upx;
			margin-bottom: 16upx;
		}

		.popup .top .spec-name{
			font-size: 24upx;
		}

		.popup .top .store text{
			color: #e60012;
		}

		.popup .buy-number{
			display: flex;
			justify-content: space-between;
			font-size: 24upx;
			align-items: center;
			padding: 0 40upx;
			margin-bottom: 20upx;
		}

		.popup .confirm-btn{
			background: #FD0136;
			color: #fff;
			height: 80upx;
			line-height: 80upx;
			font-size: 28upx;
			position: absolute;
			width: 100%;
			bottom: 0;
		}

		.popup .spec-box{
			border-top: 1upx solid #eee;
			display: flex;
			flex-direction: column;
			text-align: left;
			padding: 20upx;
			font-size: 24upx;
		}
		.popup .spec-box .spec-row{
			margin-bottom: 20upx;
		}

		.popup .spec-box .spec-title{
			color: #999;
			margin-bottom: 20upx;
		}

		.popup .spec-box .spec-items{
			display: flex;
		}

		.popup .spec-box .spec-items .spec-item{
			border: 1upx solid #F5F5F5;
			padding: 8upx 20upx;
			margin-right: 16upx;
			background: #F5F5F5;
			border-radius: 8upx;
		}
		.popup .spec-box .spec-items .spec-item.disable{
			color: #ccc;
		}

		.popup .spec-box .spec-items .spec-item.active{
			border: 1upx solid #E23157;
			color: #E23157;
		}
	/* 弹窗样式结束 */
</style>
